<template>
	<view class="addJob">
		<view class="content">
			<view class="pageNum mdTitle">
				<text>{{ currentPage }}</text>
				/3
			</view>
			<view class="title">想找什么工作？</view>
			<view class="md4Text mgrey info">添加多个求职期望，可获得更多精准高薪工作</view>
			<!-- 选择条件 -->
			<view class="selection">
				<view class="selectItem" @click="showStateList">
					<view class="name smTitle">求职状态</view>

					<view class="next">
						<text class="md4Text mgrey">{{ state }}</text>
						<image src="../../../static/imgs/right.png" mode=""></image>
					</view>
				</view>

				<view class="selectItem" @click="goMyCity">
					<view class="name smTitle">工作城市</view>

					<view class="next">
						<text class="md4Text mgrey">{{ city }}</text>
						<image src="../../../static/imgs/right.png" mode=""></image>
					</view>
				</view>

				<view class="selectItem">
					<view class="name smTitle">UI设计师</view>

					<view class="next">
						<text class="md4Text mgrey">{{ industry }}</text>
						<image src="../../../static/imgs/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 继续添加求职期望 -->
		
	<image src="../../../static/imgs/detail/addJob.png" mode="" class="keepAdd" @tap="goExpect"></image>
	<mask-page v-if="isChange">
	</mask-page>
	
	<job-state v-if="isChange" @getState = "getState"></job-state>
	</view>
</template>

<script>
import maskPage from '../../commponent/public/mask.vue';
import jobState from '../../commponent/home/jobState.vue'
export default {
	data() {
		return {
			currentPage: 1,
			state: '离职-随时到岗',
			city: '合肥市',
			industry: '8-9k,行业不限',
			isChange:false
		};
	},
	components:{
		maskPage,
		jobState
	},

	methods: {
		goExpect(){
			uni.navigateTo({
				url:'/pages/views/home/addExpect'
			})
		},
		getState(data){
			console.log('state',data);
			this.state = data.state;
			this.isChange = false;
		},
		showStateList(){
			this.isChange = true;
		},
		goMyCity(){
			uni.navigateTo({
				url:'/pages/views/home/myCity'
			})
		}
	},
	
	 onLoad: function (option) {
		 console.log('option',option.city);
		 this.city = option.city;
	 }
};
</script>

<style scoped lang="less">
.addJob {
	width: 100%;
	background: #ffffff;
	.content {
		width: 100%;
		padding: 0 52upx;
		position: relative;
		.pageNum {
			position: absolute;
			right: 70upx;
			top: 0;
			text {
				color: #3465b1;
			}
		}

		.title {
			font-size: 40upx;
			margin: 80upx 0 25upx 20upx;
			font-weight: bold;
			letter-spacing: 5upx;
		}
		.info {
			margin-left: 20upx;
		}

		.selection {
			margin-top: 40upx;
			.selectItem {
				width: 100%;

				align-items: center;
				justify-content: space-between;
				padding-bottom: 25upx;
				padding-top: 50upx;
				border-bottom: 2upx solid #e5e5e5;
				display: flex;
				.next {
					image {
						vertical-align: middle;
						margin-left: 10upx;
						width: 48upx;
						height: 48upx;
					}
				}
			}
		}
	}
	
	.keepAdd{
		display: block;
		width: 612upx;
		height: 112upx;
		margin: 62upx auto;
	}
}
</style>
